<template>
    <el-affix :offset="120">
        <div class="quiz-nav-card card-box">
            <h5 class="card-title">
                <el-icon size="20" color="#f06423"><Guide /></el-icon>
                {{ $t('quiz_nav.tit') }}
            </h5>
            <div class="card-text">
                <el-anchor :offset="120" container=".lms-page-container" :marker="false">
                    <el-anchor-link :href="`#${props.anchorTag}${item.id}`" v-for="(item, index) in props.quizList" :key="item.id">
                        <span class="mark-span" v-if="item.isMark"></span>
                        <span class="num">{{ index + 1 }}</span>
                        <span class="is-correct" :class="{ red: item.isCorrect === 0, green: item.isCorrect === 1 }">
                            <el-icon size="14" color="#fff" v-if="item.isCorrect === 1"><Select /></el-icon>
                            <el-icon size="14" color="#fff" v-else-if="item.isCorrect === 0"><CloseBold /></el-icon>
                        </span>
                    </el-anchor-link>
                </el-anchor>
                <div class="btn-list">
                    <el-button link @click="goPage(`/console/course/${courseId}/unit/${unitId}/quiz/${props.quizId}`)" v-if="props.isReview">{{ $t('quiz_nav.btn_text_1') }}</el-button>
                    <el-button link @click="submitHandle" v-if="props.isAnswer">{{ $t('quiz_nav.btn_text_2') }}</el-button>
                    <el-button color="#f06423" @click="router.go(0)" v-if="props.isNew && !roleStore.isStudent">{{ $t('quiz_nav.btn_text_3') }}</el-button>
                </div>
            </div>
        </div>
    </el-affix>
</template>

<script lang="ts" setup>
import { useRoleStore } from '@/stores/role'
import { goPage } from '@/utils/global'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps<{
    quizList: { id: number; isMark: boolean; isCorrect?: number }[]
    anchorTag: string
    quizId: number
    isAnswer: boolean
    isReview: boolean
    isNew: boolean
    submitHandle?: () => void
}>()
const route = useRoute()
const router = useRouter()
const roleStore = useRoleStore()
const courseId = computed(() => Number(route.params.courseId))
const unitId = computed(() => Number(route.params.unitId))

const submitHandle = () => {
    if (props.submitHandle) props.submitHandle()
}
</script>

<style lang="less" scoped>
:deep(.el-anchor) {
    .el-anchor__list {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;

        .el-anchor__item {
            width: calc(16.6666% - 5px);

            .el-anchor__link {
                border-radius: 3px;
                border: 3px solid #f06423;
                padding: 0;
                display: block;
                position: relative;
                height: 44px;
                width: 100%;
                background-color: #6c757d;
                text-align: center;

                .mark-span {
                    border: 8px solid transparent;
                    border-bottom-color: #f06423;
                    display: block;
                    transform: rotate(45deg) translate(0%, -75%);

                    position: absolute;
                    top: 0;
                    right: 0;
                }

                .num {
                    width: 100%;
                    line-height: 20px;
                    background-color: #435764;
                    color: #fff;
                    font-size: 14px;
                    display: block;
                }

                .is-correct {
                    width: 100%;
                    line-height: 20px;
                    height: 20px;
                    display: block;
                    background-color: #d7d7d7;

                    &.green {
                        background-color: #28a745;
                    }

                    &.red {
                        background-color: #dc3545;
                    }
                }
            }
        }
    }
}

.btn-list {
    margin-top: 22px;

    .el-button.is-link {
        color: #f06423;
    }
}
</style>
